<!--
 * @Date: 2025-02-28 10:23:47
 * @LastEditTime: 2025-04-07 16:18:54
 * @FilePath: \LeagueBard\frontend\src\components\historyRecord\detailInfoRow.vue
 * @Description: 详情页下的单列信息展示
-->
<script lang="ts" setup>
import LcuImage from '@/components/lcuImage.vue'
import { useClientStore } from '@/stores/client';
import { defineEmits, defineProps, onMounted } from 'vue';

// props
const props = defineProps({
  data: {
    type: Object,
    default: () => { },
  },
  color: {
    type: String,
    default: () => '#7AA4C8',
  },
})

const emit = defineEmits(['viewPlayer'])

// 获取个人战绩并整理
function getStatsInfo(item, type) {
  const { kills, deaths, assists, goldEarned, totalDamageDealtToChampions } = item?.stats ?? {}
  switch (type) {
    case 'stats': // 战绩
      return `${kills}/${deaths}/${assists}`
    case 'dps': // 输出
      return `${totalDamageDealtToChampions}`
    case 'gold': // 金钱
      return `${goldEarned}`
    default:
      return ''
  }
}

function viewPlayerData(player) {
  // 判断是不是自己
  if (player?.puuid === useClientStore().userInfo?.puuid) return
  emit('viewPlayer', player?.puuid)
}

onMounted(async () => {
})
</script>

<template>
  <a-row class="detail_info_row" :style="{ borderColor: color }">
    <!-- 左侧：等级 头像 名字 -->
    <a-col :span="8" class="detail_info_row_left flex items-center">
      <div class="detail_info_row_level">{{ data?.stats?.champLevel || 0 }}</div>
      <div class="detail_info_row_avatar">
        <LcuImage :id="data.championId" width="120%" height="120%" type="champion" />
      </div>
      <div class="detail_info_row_name">
        <p class="user_name flex items-end" :title="`${data?.player?.gameName}#${data?.player?.tagLine}`"
          @click="viewPlayerData(data?.player)">
          <!-- 用户名：昵称#编号 -->
          <span class="max-w-[100%] leading-[1] font-bold">{{ data?.player?.gameName || '未知召唤师' }}</span>
          <!-- <span class="text-[10px] ml-1 opacity-50">#{{ data?.player?.tagLine }}</span> -->
        </p>
        <!-- 英雄名 -->
        <p class="champion_name mt-2px">{{ data?.championInfo?.name }}</p>
      </div>
      <!-- 操作按钮：复制 标记 拉黑 -->
      <!-- <div class="detail_info_row_operation">
        <el-button-group class="ml-4" size="small">
          <el-button :icon="Edit" />
        </el-button-group>
      </div> -->
    </a-col>

    <!-- 中间: 符文 召唤师技能 装备 -->
    <a-col :span="8" class="detail_info_row_middle flex items-center">
      <div class="detail_info_row_rune flex items-end">
        <div class="rune_main">
          <LcuImage :id="data.stats.perk0" type="rune" />
        </div>
        <div class="rune_sub">
          <LcuImage :id="data.stats.perkSubStyle" type="rune" />
        </div>
      </div>
      <div class="detail_info_row_skill mr-5">
        <div class="skill skill_D">
          <LcuImage :id="data.spell1Id" type="spell" />
        </div>
        <div class="skill skill_F">
          <LcuImage :id="data.spell2Id" type="spell" />
        </div>
      </div>
      <div class="detail_info_row_equipment flex">
        <div v-for="item, index in 7" :key="item" class="equipment">
          <LcuImage :id="data.stats[`item${index}`]" type="item" />
        </div>
      </div>
    </a-col>

    <!-- 右侧：击杀、死亡、助攻、经济、时间 -->
    <a-col :span="8" class="detail_info_row_right flex items-center opacity-90">
      <a-col :span="8" class="item_stats">{{ getStatsInfo(data, 'stats') }}</a-col>
      <a-col :span="8" class="item_data">{{ getStatsInfo(data, 'dps') }}</a-col>
      <a-col :span="8" class="item_gold">{{ getStatsInfo(data, 'gold') }}</a-col>
    </a-col>
  </a-row>
</template>

<style lang="scss" scoped>
.detail_info_row {
  width: 100%;
  height: 48px;
  background-color: #F9F9FB;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;

  // 左
  .detail_info_row_left {
    height: 100%;
    padding-left: 14px;
    position: relative;
    z-index: 1;

    &:hover {
      .detail_info_row_operation {
        opacity: 1;
      }
    }

    .detail_info_row_level {
      font-weight: bolder;
      color: #111;
      font-size: 14px;
      text-align: center;
      width: 1.2em;
    }

    .detail_info_row_avatar {
      margin: 0 10px;
      height: 30px;
      width: 30px;
      overflow: hidden;
      pointer-events: none;
      border-radius: 999px;
      border: 2px solid #ffd700aa;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 120%;
        width: 120%;
      }
    }

    .detail_info_row_name {
      font-size: 14px;
      color: #333;
      overflow: hidden;
      line-height: 1.2;

      .user_name {
        cursor: pointer;
        user-select: none;
        transition: all 0.2s;

        &:hover {
          color: var(--color-hover);
        }
      }

      .champion_name {
        font-size: 10px;
        color: #444;
      }

      span {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .detail_info_row_operation {
      display: flex;
      transition: all 0.3s;
      opacity: 0;
      margin-left: 30px;
    }
  }

  // 中
  .detail_info_row_middle {
    height: 100%;
    overflow: hidden;

    .detail_info_row_rune {

      .rune_main,
      .rune_sub {
        border-radius: 100%;
        border: 1px solid #4a4a4a;
        background-color: #2a2a2a;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 80%;
          transform: translateX(4%);
        }
      }

      .rune_main {
        width: 26px;
        height: 26px;

        img {
          width: 100%;
          transform: translateY(4%);
        }
      }

      .rune_sub {
        width: 16px;
        height: 16px;
        transform: translateX(-50%);
      }
    }

    .detail_info_row_skill {
      margin-right: 6px;

      .skill {
        width: 16px;
        height: 16px;
        border: 1px solid #4a4a4a;
        background-color: #2a2a2a;

        &+.skill {
          margin-top: 2px;
        }
      }
    }

    .detail_info_row_equipment {
      .equipment {
        height: 24px;
        width: 24px;
        border: 1px solid #4a4a4a;
        background-color: #2a2a2a;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  // 右
  .detail_info_row_right {
    height: 100%;

    .item_stats,
    .item_data,
    .item_gold {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      font-size: 14px;
      font-weight: normal;
    }
  }
}
</style>
